前言

昨天，我已經完成保存"日夜主題切換"狀態的功能。今天，我的目標為實現自動判斷當前時間，以便確定是否切換到夜間主題的功能。

實作夜間主題切換

首先，我創建一個名為 checkTheme() 的新方法，它的功用為監測當前時間，並且判斷當前時間是否在夜間範圍內。是的話主題更改為夜間主題，否則就不改變原主題。

我先在該方法中使用 new Date() 和 getHours() 獲取當前時間，然後使用 nightModeStartHour 和 nightModeEndHour 變數設定夜間時間範圍：

checkTheme() {
    const currentTime = new Date();
    const hours = currentTime.getHours();

    const nightModeStartHour = 18;
    const nightModeEndHour = 6;
}

接下來，我創建一個 nightTheme 變數，它的值為 "night-theme"。然後，在創建一個 newTheme 變數負責存取最後要更新的主題，現在先將它設為當前主題：

let nightTheme = "night-theme";
let newTheme = this.nowTheme;

然後，我使用 if 條件句判斷當前時間是否在夜間範圍內。是的話就將 newTheme 的值變成 "night-theme"，否則就將本地存儲中 theme 的欄位值存到 theme 變數中，再更新 newTheme 變數：

if (hours >= nightModeStartHour || hours < nightModeEndHour) {
  newTheme = nightTheme;
} else {
  let theme = localStorage.getItem("theme");
  newTheme = theme;
}

最後使用 changeTheme() 方法更改主題：

this.changeTheme(newTheme);

修改 toggleAutoSwitch() 方法

接下來，我要在 toggleAutoSwitch() 方法的條件句中加入 checkTheme() 方法，並且讓它每一分鐘檢查一次時間。

首先，當我開啟 "自動切換背景" 功能時，立刻執行一次 checkTheme() 方法。這是因為如果只設定 autoSwitchInterval，那網頁就會在 60 秒後才執行該程式，無法立刻轉變主題。

setInterval() 這個方法可以用來設定間隔多久重複一次方法。最後將本地存儲中的 autoSwitchEnabled 方法設定為 true。

以下為程式碼範例：

this.checkTheme();
this.autoSwitchInterval = setInterval(() => this.checkTheme(), 60000);
localStorage.setItem("autoSwitchEnabled", "true");

當我關閉 "自動切換背景" 功能時，就將 autoSwitchInterval 的計時器清除，然後更新 autoSwitchEnabled 的狀態。同時，我從本地存儲取出 theme 的欄位值，並附值給 nowTheme 變數。

以下為程式碼範例：

clearInterval(this.autoSwitchInterval);
localStorage.setItem("autoSwitchEnabled", "false");
this.nowTheme = localStorage.getItem("theme");
this.applySettings();

參考資料

mdn: setInterval